<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>伪类应用</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
	</head>
	<body>
     	<ul>
		    <li><a href="P1.html" target="_blank" data-page="1">青铜-1、伪类实现盒子阴影</a>
		    </li>
		    <li><a href="P2.html" target="_blank" data-page="2">青铜-2、伪元素:before实现的面包屑导航栏</a>
		    </li>
		     <li><a href="P3.html" target="_blank" data-page="3">青铜-3、伪元素实现悬停时按钮填充和边界浮动动画</a>
		    </li>
		     <li><a href="P4.html" target="_blank" data-page="4">青铜-4、伪类after实现的三角箭头</a>
		    </li>
		     <li><a href="P5.html" target="_blank" data-page="5">青铜-5、伪类after实现的图片箭头</a>
		    </li>
		     <li><a href="P6.html" target="_blank" data-page="6">青铜-6、伪元素实现带角度的底部边界（倾斜的边界）</a>
		    </li>
		    <li><a href="P7.html" target="_blank" data-page="7">王者-1、伪元素和平移（translate）变换实现的提示框</a>
		    </li>
		     <li><a href="P8.html" target="_blank" data-page="8">王者-2、使用CSS3伪元素实现的自动打字动画</a>
		    </li>
		    <li><a href="P9.html" target="_blank" data-page="9">王者-3、CSS3 伪元素构建的文章水印背景</a>
		    </li>
		    <li><a href="index.html" target="_blank" data-page="10">王者-4、CSS3 用伪元素做页码摘要</a>
		    </li>
		</ul>	
	</body>
</html>
